<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<head>
<title>话题线|北京时间</title>
<script src='${baseurl}dwr/interface/ourdiaryDwr.js'></script>
<script src='${baseurl}dwr/engine.js'></script>
<script src='${baseurl}dwr/util.js'></script>

<script type="text/javascript">
function followTrend(trend){
	document.getElementsByName("trend")[0].value=trend;
	document.getElementById("followTrendForm").submit();
}

function invent(id){
	$('.invent_overlay_content').fadeOut();
	if(isEmpty(document.getElementById(id).value)){
		return;
	}
	
	var status=document.getElementById(id).value;
	ourdiaryDwr.invent(status,function (result){
		
			if(isEmpty(result)){
			//ok
				message_box('邀请已发出');
				
			} else {
			//something wrong
				message_box(result);
			}
		});
}
function invent2(id){
	if(isEmpty(document.getElementById(id).innerText)){
		return;
	}
	
	var status=document.getElementById(id).innerText;
	ourdiaryDwr.invent(status,function (result){
			if(isEmpty(result)){
			//ok	
			message_box('邀请已发出');
			} else {
			//something wrong
			message_box(result);
			}
		});
}

function insert_trend(id){
	var data = $('#item'+id).val();
	$('.invent_content').append(data);
	
}

function invent_trend(friend_name,sIndex,trend_list){
		$('.invent_overlay').fadeIn();
		$('.invent_overlay_content').fadeIn();
		var myTrendlist = trend_list.split('#');
		
		jQuery.each(myTrendlist,function(index,item){
			if(item !==''){
				$('.invent_trendbox').append("<input type='button' id='item"+index+"' value='#"+item+"#' onclick='insert_trend("+index+");' />");
				}
			});
		var $invent_content_data ='<br/><textarea rows="10" cols="50" class="invent_content" id="trends'+sIndex+'">'+'@'+'${user.screenName}&nbsp;'+'通过话题线邀请@'+friend_name+'</textarea>';
		$('.invent_contentbox').html($invent_content_data);
		
		var $invent_sumbit_data = '<input type="button" value="邀请" onclick="invent('+"'trends"+sIndex+"'"+')" />';
		$('.invent_submit').html($invent_sumbit_data);
			   
}

function invent_morefriend(trend){
		ourdiaryDwr.getFriends(trend,function (result){
			var html="";
			if(result==null||result.length==0){
				html+="<a href=\"http://weibo.com/f/find\" target=\"blank\">加几个朋友吧</a>";
			} else {
				for(var i=0; i<result.length;i++){
					html+="<li><img src=\""+result[i].avatarLarge+"\" width=\"110px\"/><br/>"+result[i].screenName+"<div class=\"clear\"></div></li>";
				}
			}			
			$(".col_friend_list2").html(html);
			
			var trend_key = "#"+trend+"#";
			$('.invent_overlay2').fadeIn();
			$('.invent_overlay_content').fadeIn();
			var $container_weibo = $('.invent_overlay_trend');
			$container_weibo.imagesLoaded( function(){
					$container_weibo.masonry({
						itemSelector : '.box',
					columnWidth: 5,
					isAnimated: true});
			});
			$('.invent_trend_name').append(trend_key);
			$('.invent_text span').append(trend_key);
		});
		
}

function message_box(msg){ 
		$('.invent_trendbox').html('');
		
		$('.message_box').html(msg);
		$('.message_box').fadeIn().delay(2000).fadeOut(function(){
			$('.invent_overlay').fadeOut();
		});
	
}

</script>
</head>
<body>
<form action="./ourdiary.html?method.followTrend=" method="post" id="followTrendForm">
<input type="hidden" name="trend" />
</form>
<div class="invent_overlay">
<div class="invent_overlay_bg"></div>
<div class="invent_overlay_content">
<span class="invent_trendbox"></span>
 <span class="invent_contentbox"></span>
 <br/>
<span class="invent_submit"></span>
</div>

</div>
<div class="invent_overlay2">
<div class="invent_overlay_bg"></div>
<div class="invent_overlay_trend" class="content_friends clearfix">
<ul class="box col_friend_list2">
</ul>
</div>
</div>
<div id="container_weibo">

	<ul id="friends_trend" class="friends_trend" >
		<li class="active"><a href="#friend_trend">朋友关注的话题</a></li>
		<li><a href="#box_trend">话题集</a></li>
		<li><a href="javascript:void(0)" onclick="location.href='./line.html';">话题线</a></li>
		<li><a href="javascript:void(0)" onclick="location.href='./refresh.html?redirect=trendsAndFriends';">刷新</a></li>			
	</ul>
	<div id="friend_trend" class="content_friendstrend clearfix"  >
		<c:choose>
		<c:when test="${empty allFriendTrends}">
			<a href="http://weibo.com/f/find" target="blank">加几个朋友吧</a>
		</c:when>
		<c:otherwise>
			<c:forEach var="item" items="${allFriendTrends}"  varStatus="s"> 
			<ul class="box col_friend_list">
				<li>
					<img src="${item.key.avatarLarge}" width="110px"/><br/>${item.key.screenName}
					<ul>
						<c:set var="unfollow" value="${alltrends}"></c:set>
						<c:forEach var="item2" items="${item.value}"> 
						<li>	<a href="./line.html?trend=" onclick="encodeZH(this)"><c:out value="${item2.hotword}" /></a>&nbsp; 
							<c:choose>
								<c:when test="${fn:contains(alltrends, item2.hotword)}">
								已关注
								<c:set var="unfollow" value="${fn:replace(unfollow,item2.hotword, null)}"></c:set>
								</c:when>
								<c:otherwise><span onclick="followTrend('${item2.hotword}')">+关注</span></c:otherwise>
							</c:choose>
						</li>
						</c:forEach>
					</ul>
					<div class="clear"></div>
				</li>
				
				<div class="friend_trendbox_btns">
					<a href="javascript:void(0)" onclick="invent_trend('${item.key.screenName}','${s.index}','${unfollow}')">话题邀请</a>
				</div>
			</ul>
		</c:forEach> 
		</c:otherwise>
		</c:choose>
	</div>
	<div id="box_trend" class="content_friendstrend">
		<div class="trends_array">
			<c:forEach var="item" items="${trendPaticipator}" varStatus="s"> 
				<div class="trends">	
					<span><a href="./line.html?trend=" onclick="encodeZH(this)"><c:out value="${item.key}" /></a>&nbsp; &nbsp;
					<c:choose>
						<c:when test="${fn:contains(alltrends, item.key)}">已关注 <a href="javascript:void(0)" onclick="invent_morefriend('${item.key}');">邀请更多好友</a></c:when>
						<c:otherwise><a href="javascript:followTrend('${item.key}')">加关注</a></c:otherwise>
					</c:choose>
					
					</span><br/><br/>
					<c:forEach var="item2" items="${item.value}"> 
						<li><img src="${item2.avatarLarge}" width="110"/><br/>${item2.screenName}</li>
					</c:forEach>
					<div class="clear"></div>
				</div>
			</c:forEach> 
		</div>
	</div>
	<div class="clear"></div>
</div>
<div class="message_box"></div>
</body>
